
function isHtmlTag(tagName) { // 是否为html原生标签
    return ['a', 'span', 'div', 'li', 'ul', 'button'].includes(tagName)
}

export function createElementVNode(vm, tagName, data, ...children) {
    if (data == null) {
        data = {}
    }
    const key = data.key
    delete data['key']
    if (isHtmlTag(tagName)) {  // html 元素
        return vNode(tagName, key, data, children)
    } else { // 自定义的组件
        let Ctor = vm.$options.components[tagName]
        console.log(1, vm.$options.components, tagName)
        return createComponentVNode(vm, tagName, key, data, children, Ctor)
    }

}

function createComponentVNode(vm, tagName, key, data, children, Ctor) { // 创建组件的虚拟节点
    if (typeof Ctor === 'object') {

        Ctor = vm.$options._base.extend(Ctor)

    }
    data.hook = { // 创造真实节点时 调用此方法
        init(vNode) {
            console.log(vNode.componentOptions)
            vNode.componentInstance = new vNode.componentOptions.Ctor;
            let instance = vNode.componentInstance
            instance.$mount()
        }
    }
    return vNode(tagName, key, data, children, null, { Ctor })
}


export function createTextVNode(text) {
    return vNode(undefined, undefined, undefined, undefined, text)
}

function vNode(tagName, key, data, children, text, componentOptions) {

    return {
        tagName,
        key,
        data,
        children,
        text,
        componentOptions
    }

}